<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>吸顶灯效果</title>
		<style>
			/*顶部样式*/
			top context{
			height: 200px;
			background-color:#e0e0e0;
			text-align:center;
			line-height: 200px;
			}
			/*吸顶灯内容元素初始效果*/
			.sticky_element{
				height: 50px;
				background-color: #333;
				color: #fff;
				text-align: center;
				line-height: 50px;
				}
				/*页面主体区域*/
				.main_context{
				height: 8000px;
				background-color: #e0e0e0;
	     }
		 /*样式：吸顶灯卡页面顶部*/
		 .sticky{
			 position: fixed;
			 top: 0%;
			 width: 100%;
		 }
		</style>
	</head>
	<body>
		<!-- 顶部内容:导航 -->
		<div class="top_context">顶部内容区域</div>
		<!-- 吸顶灯内容-->
		<div class="sticky_element">我是吸顶元素</div>
		<!--页面主体内容-->
		<div class="main context">Lorem 喵喵喵ipsum dolor sit amet consectetur adipisicing elit. Itaque cupiditate eum velit eos, adipisci aperiam. Dignissimos atque cumque et itaque similique, quibusdam ipsa consequatur unde sapiente, iure earum saepe illo?</div>
	<script>
		//ready（）事件源语法： $(document).ready(function(){});
        //             简写:$(function(){});
		//  总结:页面元素全部加载完毕，在执行1Q相关操作
		//  script元素放在最后一个body位置【可不写)
		$(function(){
		//吸顶灯效果--- 【了解】BOM案例：浏览器6个对象的方法使用
		//思路：1.鼠标滚动，滚动吸顶灯元素位置处，效果改变
		//     2.页面顶部到吸顶灯位置：200px，大于200px
		//     3.追加第一个样式：固定定位，页面顶部位置
		
		//    1.追加样式：吸顶灯卡在页面顶部
			
			
		});
		$(document).ready(function(){
		
		// 鼠标移动到顶部内容区域---弹出文本：我是顶部元素
		$(".top_context").mouseenter(function){
			//BOM形式输出：浏览器弹窗输出文本效果
			alert("我是顶部元素");
		});
		
		});
	</script>
	</head>
	</body>
	
</html>